<template>
	<view class="page">
		<view class="flex row-between box">
			<view>头像</view>
			<view class="flex">
				<!-- #ifdef H5 || APP-PLUS -->
					<image @click="upload" class="img" :src="msg.avatar" mode=""></image>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
					<button class="select-avatar" hover-class="none" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="msg.avatar" />
					</button>
				<!-- #endif -->
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="flex row-between box">
			<view>姓名</view>
			<view>{{ msg.real_name }}</view>
		</view>
		<view class="flex row-between box">
			<view>手机号</view>
			<view>{{ msg.mobile }}</view>
		</view>
		<view class="flex box">
			<view>身份证图片</view>
		</view>
		<view class="flex row-center">
			<image @click="look(msg.cardimg)" :src="msg.cardimg" mode=""></image>
			<image @click="look(msg.cardimg2)" :src="msg.cardimg2" mode=""></image>
		</view>

		<view @click="quit" class="m-t-100 bold">
			<u-button shape="circle" size="large" type="primary" text="退出登录"></u-button>
		</view>
	</view>
</template>

<script>
import commonUtil from '@/utils/format.js';
import { uploadFile } from '@/utils/tools';
export default {
	data() {
		return {
			msg: {
				avatar: '',
				real_name: '',
				mobile: '',
				cardimg: '',
				cardimg2: ''
			}
		};
	},
	async onLoad() {
		let res = await this.$api.center();
		if (res.code == 1) {
			this.msg = res.data;
		}
	},
	methods: {
		// 上传
		async upload(num) {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function (res) {
					let files = res.tempFilePaths[0];
					uni.showLoading();
					uploadFile(files, {
						// #ifdef MP-WEIXIN
						header: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
						}
						// #endif
					})
						.then((res) => {
							uni.hideLoading();
							that.setHead(res.uri);
						})
						.catch(() => {
							uni.hideLoading();
							that.$toast({
								title: '上传失败,请重新上传!'
							})
						});
				}
			});
		},
		async setHead(img){
			let res = await this.$api.setInfo({
				field:'avatar',
				value:img
			});
			if (res.code == 1) {
				this.msg.avatar = img;
			}
		},
		async onChooseAvatar(e) {
			let that = this;
			const avatarUrl = e.detail.avatarUrl;
			if (!avatarUrl) {
				return;
			}
			uni.showLoading({
				title: '正在上传中...',
				mask: true
			});
			uploadFile(avatarUrl, {
				header: {
					// #ifdef MP-WEIXIN
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
					}
					// #endif
				}
			})
				.then((res) => {
					uni.hideLoading();
					console.log(res.uri, '1111');
					that.setHead(res.uri);
				})
				.catch(() => {
					uni.hideLoading();
					uni.showToast({
						title: '上传失败,请重新上传!',
						icon: 'none'
					});
				});
		},
		look(img) {
			commonUtil.lookImg(img);
		},
		quit() {
			let that = this;
			uni.showModal({
				content: '是否退出',
				confirmText: '退出',
				success: function (res) {
					if (res.confirm) {
						that.logout();
					}
				}
			});
		},
		async logout() {
			let res = await this.$api.logout();
			if (res.code == 1) {
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 10rpx 25rpx;

	.box {
		margin: 35rpx 0;

		view:first-child {
			font-size: 28rpx;
			font-weight: bold;
			margin-right: 36rpx;
			width: 140rpx;
			text-align: right;
		}

		view:last-child {
			font-size: 26rpx;
		}

		.img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 4rpx;
		}

		.select-avatar {
			width: 80rpx;
			height: 80rpx;
			color: #999;
			padding: 0;
			margin: 0;
			border: none;

			.avatar {
				width: 100%;
				height: 100%;
			}

			.select-btn {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				border: 1px dotted #ccc;
				font-size: 22rpx;
				border-radius: 4rpx;
			}
		}
	}
	.row-center {
		image {
			width: 300rpx;
			height: 200rpx;
			margin: 0 20rpx;
		}
	}
}
</style>
